import React, { Component } from 'react';
import './../global';
import axios from 'axios';
import './farticle.css';

class Farticle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.location.state.id
        }
    }
    componentDidMount() {
        let self = this;
        axios.get(global.constants.cmsUrl + 'carousel/find', {
            params: {
                carouselId: self.state.id
            }
        })
            .then(function (response) {
                if (response.status === 200) {
                    self.refs.banner.style.backgroundImage = 'url(' + response.data.imgUrl + ')';
                    let div = document.getElementsByClassName('essay');
                    div[0].innerHTML = response.data.imgContent;
                }
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    render() {
        return (
            <div className="farticle">
                <div className="banner" ref="banner"></div>
                <article className="essay"></article>
            </div>
        )
    }
}

export default Farticle;